<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
                };
            recalc();
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style>
        * { padding: 0; margin: 0; box-sizing: border-box; }
        img { border: none; vertical-align: middle; }
        a, a:hover, a:link, a:visited, a:active { text-decoration:none; -webkit-tap-highlight-color:transparent; tap-highlight-color:transparent; }
        .clearfix { zoom: 1; display: block; }
        .clearfix:after { content: ""; clear: both; display: block; }
        .fl { display: block; float: left; }
        .fr { display: block; float: right; }
        .textCut { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        body {
            background-color: #F5F6F7;
            font-size: .4rem;
            font-family: 'Microsoft Yahei';
        }
        .dealList {}
        .dealList a {
            display: block;
            margin-top: .2rem;
            zoom: 1;
            padding: .4rem .6rem .4rem .4rem;
            color: #999;
            background: #fff url(http://cdn.51tuanli.com/web/huiyuanupload/rightBtn.png) no-repeat 98.5% center;
            background-size: .3rem auto;
        }
        .dealList a:after { content: ""; clear: both; display: block; }
        .imgBox {
            width: 1.8rem;
            height: 1.8rem;
            margin-top: .5rem;
            border-radius: 50%;
            overflow: hidden;
        }
        .imgBox img { width: 100%; height: 100%; }
        .dealInfo { width: 7.5rem; }
        .dealName {}
        .dealName h1, .dealName h2 {
            font-size: .5rem;
            line-height: .7rem;
            font-weight: normal;
        }
        .dealName h1 { color: #333; }
        .dealName h2 { color: #F17A64; }
        .details {
            margin-top: .15rem;
            width: 100%;
        }
        .details p {
            width: 48%;
            font-size: .4rem;
            line-height: .7rem;
            float: left;
            margin-right: 2%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .details p:nth-of-type(2n) { text-align: right; }
        .payType { margin-top: .15rem; }
        .payType span {
            display: inline-block;
            padding: .12rem .3rem;
            border: 1px dashed #E6E6E6;
        }
    </style>
    <title>交易列表</title>
</head>
<body>
@if(!empty($data))
<div class="dealList">
    <input type="hidden" name="user_type" value="{{$user_type ?? 2}}">
    @foreach($data as $k=>$v)
    <a href="javascript:;" onclick="ttp.gotoC2Ctransaction('{{$v['id']}}','{{$v['type']}}')">
        <div class="imgBox fl">
            <img src="{{$v['photo']}}">
        </div>
        <div class="dealInfo fr">
            <div class="clearfix dealName">
                <h1 class="fl textCut">{{$v['nickname']}}</h1>
                <h2 class="fr textCut">{{$v['price']}}CNY</h2>
            </div>
            <div class="details clearfix">
                <p>30日成交：{{$v['date_num']}}</p>
                <p>限额：{{$v['min']}}-{{$v['max']}}</p>
                <p>数量：{{$v['num']}}</p>
            </div>
            <div class="payType">
                @if(!empty($v['alipay']))
                <span>支付宝</span>
                @endif
                @if(!empty($v['wechat']))
                <span>微信</span>
                @endif
                @if(!empty($v['bank']))
                <span>银行卡</span>
                @endif
            </div>
            <input type="hidden" name="id" value="{{$v['id']}}">
            <input type="hidden" name="type" value="{{$v['type']}}">
            <input type="hidden" name="bid" value="{{$v['uid']}}">
        </div>
    </a>
    @endforeach
</div>
    @else
    <div>暂无数据</div>
@endif
<script src="{{asset('/api/static/js/jquery-1.10.2.min.js')}}"></script>
<script src="{{asset('/api/static/swiper/js/swiper.min.js')}}"></script>
<script src="{{asset('/api/static/js/index.js')}}"></script>
<script src="{{ asset('/js/socket.io.js') }}"></script>
<script>
    function html2Escape(sHtml) {
        return sHtml.replace(/[<>&"]/g,function(c){return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c];});
    }

    function escape2Html(str) {
        var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
    var socket = io('https://a.51tuanli.com:2120');
    uid = 'entryorder_list';
    socket.on('connect', function(){
        socket.emit('login', uid);
    });
    // 后端推送来消息时
    socket.on('new_msg', function(msg){
        var text = escape2Html(msg);
        var json = JSON.parse(text);
        console.log(json);
    });
</script>
</body>
</html>
